<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合作交流</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/cooperation.css">
</head>

<body>
<div class="head">
    <div class="logo">
          <a href="index.html"> <img src="imgs/index/ESDC_logo.jpg" alt=""> </a>
        <div class="logo_name">
            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
            <p>&nbsp;Engineering Software Development Centre</p>
        </div>
    </div>
    <div class="top_list">
        <ul>
            <li><a href="visitor.html">访客</a></li>
<!--            <li><a href="">邮箱</a></li>-->
            <li class="dropdown"><a href="">联系我们</a>
                <div class="dropdown-content">
                    <p>电话：123-456-7890</p>
                    <p>邮箱：contact@example.com</p>
                    <p>地址：北京市朝阳区</p>
                </div>
            </li>
            <li id="userProfileBtn" style="display: none;">
                <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
            </li>
            <li id="loginRegisterBtn">
                <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
            </li>
        </ul>
    </div>
    <div class="bottom_nav">
        <ul>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="researchFindings.html">研究成果</a></li>
            <li><a href="newsEvents.html">新闻活动</a></li>
            <li><a href="cooperation.html">合作交流</a></li>
        </ul>
    </div>
    <div class="test"></div>
</div>
<div class="cooperation">
    <img src="imgs/cooperation/HandShake.jpg">
    <div class="contact-way">
<!--        <p>地址：江西师范大学(青山湖校区) 双理楼</p>-->
<!--        <p>电话：123-456-7890</p>-->
<!--        <p>邮箱：contact@example.com</p>-->


        <form id="messageForm">
            <label class="leaveWords" for="message">
                留言贴
            </label>
            <p>每一份留言都记录了您的想法，也为我们提供了珍贵的回忆</p>
            <textarea id="message" name="message" required></textarea>
            <button type="submit">提交</button>
        </form>
    </div>
</div>
<div class="myCanvas" id="myCanvas">
    <canvas></canvas>
</div>
<div id="loginBox" class="login-box" style="display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; padding: 0; width: 1200px; height: 850px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <iframe id="loginFrame" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<script>
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法

        var particles = [];

        var pIndex = 0;
        var frameId;


        /*             */
        /*Particle */
        /*            */

        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }

        var colorTips = [
            '#0b0a0a',
            '#151313',
            '#929392',
            '#e5ebec',
            '#171516'
        ]

        //function Particle(color,x,y,circleSize,radius){
        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }


        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 == 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>
<script>
    VanillaTilt.init(document.querySelectorAll(".box"), {
        max: 25,
        speed: 400,
        glare: true,
        "max-glare":0.5
    });
</script>

<script src="js/axios-0.18.0.js"></script>
<script src="js/window.js"></script>
<script>
    // 获取表单元素
    const form = document.getElementById('messageForm');

    // 为表单添加提交事件监听器
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取留言内容
        const message = document.getElementById('message').value;

        // 使用Axios发送数据到服务器
        axios({
            method: 'post',
            url: 'http://localhost:8080/javaweb_project/messagesServlet/insertMessages',
            data: `message=${encodeURIComponent(message)}`, // 对留言内容进行URL编码
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(function (response) {
                console.log('Success:', response.data); // 处理响应数据
                if (response.data === 'success') {
                    alert("留言成功，感谢您的支持！");
                } else if (response.data === 'NotLogin') {
                    alert("留言失败，您还未登入！")
                } else if (response.data === 'contentIsEmpty') {
                    alert("留言是空的哦~")
                }
                // 清空留言框
                document.getElementById('message').value = '';
            })
            .catch(function (error) {
                console.error('Error:', error); // 处理错误
                alert('留言提交失败，请稍后再试。');
            });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 检查登录状态并更新界面
    });

    function checkLoginStatus() {
        const username = localStorage.getItem('username');
        if (username) {
            updateUserInfo(username);
        } else {
            // 如果没有用户名，则显示登录注册按钮
            const loginRegisterBtn = document.getElementById('loginRegisterBtn');
            const userProfileBtn = document.getElementById('userProfileBtn');
            loginRegisterBtn.style.display = 'inline';
            userProfileBtn.style.display = 'none';
        }
    }

    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>

</body>
</html>